import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { X, Save, Calendar, Flag, Tag } from 'lucide-react';

const TodoForm = ({ todo, onSubmit, onClose, darkMode }) => {
  const [formData, setFormData] = useState({
    title: '',
    description: '',
    priority: 'medium',
    category: 'general',
    due_date: ''
  });

  useEffect(() => {
    if (todo) {
      setFormData({
        title: todo.title || '',
        description: todo.description || '',
        priority: todo.priority || 'medium',
        category: todo.category || 'general',
        due_date: todo.due_date ? todo.due_date.split('T')[0] : ''
      });
    }
  }, [todo]);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!formData.title.trim()) return;
    
    onSubmit({
      ...formData,
      completed: todo?.completed || false
    });
  };

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
      onClick={onClose}
    >
      <motion.div
        initial={{ scale: 0.9, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        exit={{ scale: 0.9, opacity: 0 }}
        className="glass-effect p-6 w-full max-w-md"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between mb-6">
          <h2 className={`text-xl font-bold ${darkMode ? 'text-white' : 'text-gray-800'}`}>
            {todo ? '编辑任务' : '添加新任务'}
          </h2>
          <button
            onClick={onClose}
            className="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          {/* 标题 */}
          <div>
            <label className={`block text-sm font-medium mb-2 ${
              darkMode ? 'text-white/80' : 'text-gray-700'
            }`}>
              任务标题 *
            </label>
            <input
              type="text"
              name="title"
              value={formData.title}
              onChange={handleChange}
              placeholder="输入任务标题..."
              className="input-field w-full"
              required
            />
          </div>

          {/* 描述 */}
          <div>
            <label className={`block text-sm font-medium mb-2 ${
              darkMode ? 'text-white/80' : 'text-gray-700'
            }`}>
              任务描述
            </label>
            <textarea
              name="description"
              value={formData.description}
              onChange={handleChange}
              placeholder="输入任务描述..."
              rows={3}
              className="input-field w-full resize-none"
            />
          </div>

          {/* 优先级和分类 */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className={`block text-sm font-medium mb-2 ${
                darkMode ? 'text-white/80' : 'text-gray-700'
              }`}>
                <Flag className="w-4 h-4 inline mr-1" />
                优先级
              </label>
              <select
                name="priority"
                value={formData.priority}
                onChange={handleChange}
                className="input-field w-full"
              >
                <option value="low">低优先级</option>
                <option value="medium">中优先级</option>
                <option value="high">高优先级</option>
              </select>
            </div>

            <div>
              <label className={`block text-sm font-medium mb-2 ${
                darkMode ? 'text-white/80' : 'text-gray-700'
              }`}>
                <Tag className="w-4 h-4 inline mr-1" />
                分类
              </label>
              <select
                name="category"
                value={formData.category}
                onChange={handleChange}
                className="input-field w-full"
              >
                <option value="general">通用</option>
                <option value="work">工作</option>
                <option value="personal">个人</option>
                <option value="shopping">购物</option>
                <option value="health">健康</option>
                <option value="study">学习</option>
              </select>
            </div>
          </div>

          {/* 截止日期 */}
          <div>
            <label className={`block text-sm font-medium mb-2 ${
              darkMode ? 'text-white/80' : 'text-gray-700'
            }`}>
              <Calendar className="w-4 h-4 inline mr-1" />
              截止日期
            </label>
            <input
              type="date"
              name="due_date"
              value={formData.due_date}
              onChange={handleChange}
              className="input-field w-full"
              min={new Date().toISOString().split('T')[0]}
            />
          </div>

          {/* 按钮 */}
          <div className="flex gap-3 pt-4">
            <button
              type="button"
              onClick={onClose}
              className="btn-secondary flex-1"
            >
              取消
            </button>
            <button
              type="submit"
              className="btn-primary flex-1 flex items-center justify-center gap-2"
            >
              <Save className="w-4 h-4" />
              {todo ? '更新' : '创建'}
            </button>
          </div>
        </form>
      </motion.div>
    </motion.div>
  );
};

export default TodoForm;